<template>
  <div class="maintenance-container">
    <div class="childpage-logo-title">
      <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
      <span class="page-title-text">消防维保监管</span>
    </div>
    <div class="maintenance-select">
      <div :class="{ parentSelect: selectStatus }">
        <el-select v-model="selectValue" filterable placeholder="请选择" @change="selectedOptionsChange">
          <el-option v-if="isMuilUnitUser" label="所有单位" value="-1"></el-option>
          <el-option v-for="item in selectedOptionsData" :key="item.orgId" :label="item.orgName" :value="item.orgId"></el-option>
        </el-select>
      </div>
      <div class="childSelect">
        <el-select v-model="childSelectValue" filterable placeholder="请选择" v-show="selectStatus" @change="childSelectedOptionsChange">
          <el-option label="所有楼栋" value="-1"></el-option>
          <el-option v-for="item in childSelectedOptionsData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <ul class="companyBox" v-show="swiperStatus == 3">
      <li v-for="(item, index) in selectedOptionsData" :key="index">
        <el-image :src="item.viewUrl" fit="cover">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </li>
    </ul>
    <ul class="companyBox companyBoxSwiper" v-show="swiperStatus == 2">
      <el-carousel indicator-position="outside" arrow="never" :autoplay="false" trigger="click">
        <el-carousel-item v-for="(item, index) in selectedOptionsData" :key="index">
          <el-image :src="item.viewUrl || noimg" :fit="item.viewUrl ? 'cover' : 'contain'"></el-image>
        </el-carousel-item>
      </el-carousel>
    </ul>
    <ul class="companyBox companyBoxOnly" v-show="swiperStatus == 1">
      <li v-for="(item, index) in selectedOptionsData" :key="index">
        <el-image :src="item.viewUrl || noimg" :fit="item.viewUrl ? 'cover' : 'contain'"></el-image>
      </li>
    </ul>

    <div class="fire-control">
      >
      <div class="fire-text">
        <p>消防资产</p>
        <p>{{ fireTotal }}</p>
      </div>
    </div>
    <div class="fire-animate">
      <div class="tool-icon">
        <div>
          <img src="../../../assets/images/homeLeft/tool1.png" alt />
          <p>{{ getMaintainInfoDetailObj.inspectPercent }}%</p>
        </div>
        <div>
          <img src="../../../assets/images/homeLeft/tool2.png" alt />
          <p>{{ getMaintainInfoDetailObj.maintainPercent }}%</p>
        </div>
        <div>
          <img src="../../../assets/images/homeLeft/tool3.png" alt />
          <p>{{ getMaintainInfoDetailObj.singleTestPercent }}%</p>
        </div>
        <div>
          <img src="../../../assets/images/homeLeft/tool4.png" alt />
          <p>{{ getMaintainInfoDetailObj.testPercent }}%</p>
        </div>
      </div>
      <!-- 背景圆动画 -->
      <div class="box yuan">
        <div class="animate wave">
          <div class="w1"></div>
          <div class="w2"></div>
          <div class="w3"></div>
          <div class="w4"></div>
        </div>
      </div>
    </div>
    <div class="maintenance-nums">
      <div>
        <p>维保任务总数</p>
        <p>{{ getMaintainInfoDetailObj.maintainTaskTotal }}</p>
      </div>
      <div>
        <p>维保任务完成度</p>
        <p>
          <el-progress :percentage="Number(percentage)" v-if="percentage"></el-progress>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import '@/styles/common/childPage.scss'
import { getMaintainInfoDetail, getMaintainMarkInfo } from '@/api/maintenance'
import { getOrgsStatusList, getBuildListExt } from '@/api/organization'

import getNowFormatDate from '@/utils/today'
export default {
  name: 'Maintenance',
  data() {
    return {
      selectValue: '',
      orgIds: '',
      fbsId: -1,
      selectedOptionsData: [],
      childSelectedOptionsData: [],
      getMaintainInfoDetailObj: {},
      selectStatus: false,
      childSelectValue: '',
      noimg: require('../../../assets/images/default/noimg.png'),
      fireTotal: 0,
      percentage: 0,
      swiperStatus: false,
      timer: null,
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
    }
  },
  props: {
    parames: {
      required: true,
    },
  },
  computed: {
    currentMapType() {
      return this.$store.state.currentMapType
    },
  },
  created() {
    this.orgIds = this.parames.orgIds
    this.fbsId = Number(this.parames.fbsId) || String(this.fbsId)
    if (this.selectValue == '' && this.orgIds == this.fbsId) {
      this.childSelectValue = '-1'
    } else {
      this.childSelectValue = this.fbsId
    }
    if (
      this.parames.orgIds &&
      this.parames.orgIds.toString().split(',').length > 1 &&
      this.isMuilUnitUser
    ) {
      this.selectStatus = false
      this.selectValue = '-1'
      this.orgIds = '-1'
    } else {
      this.selectValue = Number(this.parames.orgIds)
      this.orgIds = this.parames.orgIds
    }

    this.initMapType = +this.currentMapType

    this.getBuildListExt()
    //蜂鸟地图切换楼层和场景调用
    window.FunList.refreshmapMaintenance = this.getMarks
    this.getMarks()
  },
  mounted() {
    this.getOrgsStatusList()
    this.getMaintainInfoDetail()
    if (typeof this.parames.orgIds === 'string' && !this.isMuilUnitUser) {
      this.selectStatus = true
      //  this.$nextTick(res => {
      //     getBuildListExt({ orgId: this.selectValue }).then(res => {
      //      if(res.data.length>0){ this.childSelectedOptionsData = res.data;}
      //     });
      //   });
    }
  },
  beforeDestroy: function () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    getRandomArrayElements(arr, count) {
      //随机函数
      var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random())
        temp = shuffled[index]
        shuffled[index] = shuffled[i]
        shuffled[i] = temp
      }
      return shuffled.slice(min)
    },
    getOrgsStatusList() {
      this.timer && clearInterval(this.timer)
      getOrgsStatusList({ orgIds: this.selectValue }).then((res) => {
        if (res.status == 200) {
          if (typeof this.selectValue === 'string') {
            if (res.data.totalNum < 9 && res.data.totalNum != 1) {
              this.swiperStatus = 2
            }
            if (res.data.totalNum > 8) {
              this.swiperStatus = 3
              const that = this
              that.timer = setInterval((res) => {
                if (that.selectedOptionsData.length > 0) {
                  that.selectedOptionsData =
                    that.getRandomArrayElements(that.selectedOptionsData, 9) ||
                    []
                }
              }, 30000)
            }
            if (res.data.totalNum == 1) {
              this.swiperStatus = 1
            }
          } else {
            this.swiperStatus = 1
          }
          this.selectedOptionsData = res.data.orgDetail || []
        }
      })
    },
    getMaintainInfoDetail() {
      this.$Ctl.loading(1, 10000)
      getMaintainInfoDetail({
        orgIds: this.selectValue,
        time: getNowFormatDate.getNowFormatDate(),
        fbsId: this.childSelectValue,
      }).then((res) => {
        if ((res.status = 200)) {
          this.$Ctl.loading(0)
          this.getMaintainInfoDetailObj = res.data
          this.percentage = res.data.assetsPercent
          this.fireTotal =
            res.data.inspectTotal +
            res.data.singleTestTotal +
            res.data.maintainTotal +
            res.data.testTotal
        }
      })
    },
    getBuildListExt() {
      if (this.selectValue != -1) {
        this.selectStatus = true
      } else {
        this.selectStatus = false
      }
      this.$nextTick((res) => {
        getBuildListExt({ orgId: this.selectValue }).then((res) => {
          if (res.data.length > 0) {
            this.childSelectedOptionsData = res.data
          }
        })
      })
    },
    getMarks() {
      if (this.selectValue == -1) {
        this.childSelectValue = -1
      }
      getMaintainMarkInfo({
        orgIds: this.selectValue,
        time: getNowFormatDate.getNowFormatDate(),
        fbsId: this.childSelectValue,
        mapType: localStorage.getItem('ilinkBs_currentMapType'),
        isOutside:
          this.isMultiHome() || this.selectValue === '-1'
            ? 1
            : localStorage.getItem('ilinkBs_inoutDoorType') || 0,
      }).then((res) => {
        if (res.status == 200) {
          this.$Ctl.setMapMark({ 33: res.data || [] }, true, false)
        }
      })

      this.$nextTick(() => {
        this.$Ctl.enterChild(
          'Maintenance',
          {
            obj: [
              { orgIds: this.selectValue },
              { fbsId: this.childSelectValue },
            ],
          },
          'right'
        )
      })
    },
    selectedOptionsChange(item) {
      if (item === '-1') {
        this.childSelectValue = '-1'
        this.$store.commit('setCurrentOrgId', '')
        this.$nextTick(() => {
          this.$Ctl.enterChild('Maintenance', {
            orgIds: this.$store.state.userInfo.organizationIds,
          })
        })
      }
      this.getOrgsStatusList()
      this.getMaintainInfoDetail()
      this.childSelectedOptionsData = []
      this.childSelectValue = '-1'
      // if (typeof this.selectValue === "string") {
      //   this.childSelectValue = "-1"; //单单位切换所有单位，楼层初始化
      // }
      if (typeof this.selectValue != 'string') {
        this.$nextTick((res) => {
          if (this.selectValue == -1) {
            this.selectStatus = false
          } else {
            this.selectStatus = true
            getBuildListExt({ orgId: this.selectValue }).then((res) => {
              if (res.data.length > 0) {
                this.childSelectedOptionsData = res.data
              }
            })
          }
        })
      } else {
        this.selectStatus = false
      }

      if (this.currentMapType == 2 || this.currentMapType == 4) {
        if (item == -1) {
          this.$store.commit('setCurrentMapType', this.initMapType)
        } else {
          this.$Ctl.enterSingleUnitMap(
            {
              orgId: item,
            },
            () => {
              this.handleEnterMaintainance()
            }
          )
        }
      } else {
        this.handleEnterMaintainance()
      }
    },
    handleEnterMaintainance() {
      this.$Ctl.enterChild(
        'Maintenance',
        {
          obj: [{ orgIds: this.selectValue }, { fbsId: this.childSelectValue }],
        },
        'right'
      )

      this.getMarks()
      this.getMaintainInfoDetail()
    },
    childSelectedOptionsChange() {
      this.getBuildListExt()
      this.getMarks()
      this.getMaintainInfoDetail()
      //   this.$Ctl.enterChild(
      //     'Maintenance',
      //     {
      //       obj: [{ orgIds: this.selectValue }, { fbsId: this.childSelectValue }],
      //     },
      //     'right'
      //   )
    },
    isMultiHome() {
      return (
        this.parames.orgIds &&
        this.parames.orgIds.toString().split(',').length > 1 &&
        this.isMuilUnitUser
      )
    },
  },
}
</script>
<style lang="scss">
.maintenance-container {
  height: 100%;
  position: relative;
  .companyBox {
    margin-top: 20px;
    height: 240px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    & > li {
      width: 33.3%;
      height: 33.3%;
      .el-image {
        width: 98%;
        height: 98%;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .companyBox.companyBoxOnly {
    li {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .companyBox.companyBoxSwiper {
    .el-carousel--horizontal {
      width: 100%;
      height: 100%;
      .el-carousel__container {
        height: 83%;
        .el-image {
          height: 100%;
          width: 100%;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .el-carousel__button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    }
  }
  .maintenance-select {
    .parentSelect {
      .el-input__inner {
        border-bottom: 0;
      }
      .el-input--suffix {
        &::before {
          content: '';
          border-bottom: 0;
        }
        &::after {
          content: '';
          border-bottom: 0;
        }
      }
    }
    .childSelect {
      .el-select__caret {
        margin-left: 30px;
      }
      .el-input--suffix {
        &::before {
          content: '';
          border-top: 0;
        }
        &::after {
          content: '';
          border-top: 0;
        }
      }
      .el-input__inner {
        text-indent: 40px;
        border-top: 0;
      }
    }
    .el-cascader {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
    .el-input--suffix {
      &::before {
        content: '';
        border-top: 2px solid #59acb6;
        border-bottom: 2px solid #59acb6;
        position: absolute;
        width: 10px;
        height: 40px;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        border-top: 2px solid #59acb6;
        border-bottom: 2px solid #59acb6;
        position: absolute;
        width: 10px;
        height: 40px;
        right: 0;
        top: 0;
      }
    }
    .el-input__suffix {
      left: 0 !important;
      right: initial;
      color: #60c2ff;
    }
    .el-select__caret {
      color: #60c2ff;
    }
    .el-input__inner {
      text-indent: 20px;
      color: #60c2ff;
      background-color: rgba(70, 153, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: 100%;
      position: relative;
      &::-webkit-input-placeholder {
        color: #60c2ff !important;
      }
    }
  }
  .fire-control {
    position: relative;
    margin: 30px 0;
    width: 100%;
    height: 120px;
    background: url('../../../assets/images/homeLeft/fire-control.png')
      no-repeat;
    background-size: 100% 100%;
    .fire-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 60%;
      p {
        color: #a3bedd;
        font-size: 1rem;
        &:nth-child(2) {
          font-size: 2rem;
          color: #4bb2ff;
          font-family: 'DigitaldreamFat';
          margin-top: 5px;
        }
      }
    }
  }
  .wave::before {
    position: absolute;
    content: '';
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    background: url('../../../assets/images/homeLeft/toolBg.png') no-repeat;
    width: 150px;
    height: 150px;
    background-size: 100% 100%;
  }
  .animate .w1 {
    border: 2px solid rgba(16, 128, 255, 0.6);
    box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
    -webkit-animation-delay: 0s;
  }
  .animate .w2 {
    border: 2px solid rgba(16, 128, 255, 0.6);
    box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
    -webkit-animation-delay: 1s;
  }
  .animate .w3 {
    border: 2px solid rgba(16, 128, 255, 0.6);
    box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
    -webkit-animation-delay: 2s;
  }
  .animate .w4 {
    border: 2px solid rgba(16, 128, 255, 0.6);
    box-shadow: 0px -5px 10px rgba(16, 128, 255, 1) inset;
    -webkit-animation-delay: 3s;
  }
  .wave {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    pointer-events: none;
  }
  .wave * {
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: opac 4s infinite;
  }
  .fire-animate {
    position: relative;
    margin-top: 250px;
    .tool-icon {
      position: relative;
      & > div {
        text-align: center;
        color: #2bcaf1;
        p {
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
        }
        &:nth-child(1) {
          position: absolute;
          left: 0;
          top: -150px;
          animation: slider 3s infinite;
          -webkit-animation-direction: alternate;
        }
        &:nth-child(2) {
          position: absolute;
          left: 25%;
          top: -190px;
          animation: slider2 5s infinite;
          -webkit-animation-direction: alternate;
        }
        &:nth-child(3) {
          position: absolute;
          left: 55%;
          top: -190px;
          animation: slider2 5s infinite;
          -webkit-animation-direction: alternate;
        }
        &:nth-child(4) {
          position: absolute;
          right: 0;
          top: -150px;
          animation: slider 3s infinite;
          -webkit-animation-direction: alternate;
        }
      }
    }
  }
  @keyframes slider {
    from {
      top: -150px;
    }
    to {
      top: -210px;
    }
  }
  @keyframes slider2 {
    from {
      top: -190px;
    }
    to {
      top: -240px;
    }
  }
  @keyframes opac {
    from {
      opacity: 1;
      width: 0;
      height: 0;
      top: 25%;
      left: 50%;
    }
    to {
      opacity: 0;
      width: 100%;
      height: 50%;
      top: 0;
      left: 0;
    }
  }
  .maintenance-nums {
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;

    & > div {
      &:nth-child(1) {
        margin-right: 40px;
      }
      &:nth-child(2) {
        flex: 0.8;
      }
      color: #ffffff;
      p {
        font-size: 18px;
        &:nth-child(2) {
          color: #7fc0f7;
          .el-progress__text {
            font-size: 18px !important;
            color: #7fc0f7;
            float: left;
            margin-left: 0;
            margin-right: 10px;
          }
        }
        .el-progress-bar {
          margin-top: 5px;
          width: 90%;
        }
        margin-top: 5px;
      }
    }
  }
}
</style>
